<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="msg">
        <my-com v-bind:cmsg='msg'></my-com>

        <hr>

        <p>父组件中的对象{{obj.a}}</p>
        <com2 :o='obj'></com2>
    </div>

    <script type="text/html" id="my-com">
        <div>
            <p>{{cmsg}}</p>
            <input type="text" v-model='cmsg'>
        </div>       
    </script>

    <script>
        Vue.component('my-com',{
            template:'#my-com',
            // vue 中props的传值是单向的，只能从上往下传递，接收的数据只能使用，不能修改
            props:['cmsg'],
            /*
                props中的数据作为初始值传入，子组件要修改时，在data中创建一个组件自己的数据，初始值设置为props传入的值，以后子组件修改本身data中的值
            */
            data:function(){
                return {
                    innerMsg : this.cmsg
                }
            },
            /*
                props中的数据作为一个待处理的原始数据传入，需要通过他计算出其他数据，可以使用computed计算
            */
            computed:{
                fixMsg:function(){
                    return this.cmsg + '这是修改之后的数据'
                }
            }
        })
        Vue.component('com2',{
            template:'<input v-model.number="o.a">',
            // 如果props接收的数据是一个引用类型(对象/数组)，那么子组件可以修改数据内部的属性，且会同步到父组件的数据上，破坏了单项数据流
            props:['o']
        })
        new Vue({
            el:'#app',
            data:{
                msg:'aaa',
                obj:{
                    a:10
                }
            }            
        })
    </script>
</body>
</html>